<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head th:include="common/header"></head>
<body>
	<div class="layui-fluid">

		<!-- 导航菜单 -->
		<div th:replace="common/system/system_fragment :: system_menu('考试管理')"></div>

		<!-- 当前位置 -->
		<div th:replace="common/system/system_fragment :: system_locations('考试管理', '试题管理', '编辑信息')"></div>
		
		<div class="layui-row  yy-margin-top-10">
		
			<fieldset>
				<legend><a>基本信息</a></legend>
			
				<form class="layui-form" method="post">
				<!-- 查询 -->
					<div class="layui-colla-item">
						<div class="layui-form layui-form-pane">
							<input type="hidden" name="id" th:value="${questions.id}">
							<input type="hidden" name="type" th:value="${questions.type eq null} ? 1 : ${questions.type}">
							<input type="hidden" name="options" lay-verify="opts">
							<input type="hidden" name="success_answer" lay-verify="succAnsw">
							<!-- 试题题干 -->
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">题干</label>
								<div class="layui-input-block">
									<textarea class="layui-textarea" id="content" name="content"
											  lay-verify="required|maxLength" th:text="${questions.content}"></textarea>
								</div>
							</div>
							
							<!-- 试题类型 -->
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">题型</label>
								<div class="layui-input-block">
									<select th:disabled="${questions.id ne -1}">
										<option value="1" th:selected="${questions.type eq 1 or questions.type eq null}">单选题</option>
										<option value="2" th:selected="${questions.type eq 2}">多选题</option>
									</select>
								</div>
							</div>

							<!-- 选项个数 -->
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">选项个数</label>
								<div class="layui-input-block">
									<select th:disabled="${questions.id ne -1}">
										<option th:each="ques, quesStat:${#strings.arraySplit(questions.options, '{*}')}"
												th:value="${quesStat.count}" th:text="${quesStat.count}"
												th:selected="${quesStat.size eq quesStat.count}"></option>
										<option th:if="${questions.id eq -1}"
												th:each="qus, qusStat:${#strings.arraySplit('1,2,3,4,5,6,7,8,9', ',')}"
												th:value="${qus}" th:text="${qus}"
												th:selected="${qus eq '4'}">
										</option>
									</select>
								</div>
							</div>

							<!-- 选项 -->
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">选项</label>
								<div class="layui-input-block">
									<!-- 修改的时候显示选项 -->
									<div th:each="ques, quesStat:${#strings.arraySplit(questions.options, '{*}')}">
										<input name="success" th:type="${questions.type eq 1 or questions.type eq null} ? 'radio' : 'checkbox'"
											   th:checked="${#strings.indexOf(questions.success_answer, #strings.arraySplit(ques, '、')[0])} ne -1"
											   lay-filter="success" th:value="${#strings.arraySplit(ques, '、')[0]}">

										<input type="text" name="questions_options" style="width: 90%;float: right;"
											   autocomplete="off" class="layui-input" th:value="${ques}">
									</div>

									<!-- 增加的时候先显示4个得了，要不太墨迹 -->
									<div th:each="ques, quesStat:${#strings.arraySplit('A,B,C,D', ',')}">
										<input name="success" th:type="${questions.type eq 1 or questions.type eq null} ? 'radio' : 'checkbox'"
											   lay-filter="success" title=" " th:value="${ques}">

										<input type="text" name="questions_options" style="width: 90%;float: right;"
											   autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							
							<!-- 提交及取消按钮 -->
							<div class="layui-form-item">
								<div class="layui-input-block">
									<a class="layui-btn yy-float-right" href="javascript:history.go(-1);">返回</a>
									<a class="layui-btn yy-float-right yy-margin-right-10"
									   lay-submit="" lay-filter="questions">确定</a>
								</div>
							</div>
						</div>
					</div>
				</form>
			</fieldset>
		
		</div>
		
	</div>

	<!-- 引入js -->
	<div th:replace="common/script"></div>
	
	<script type="text/javascript">
	/*<![CDATA[*/
	
	;!function(){
		//初始化副文本编辑器
		var form = layui.form;
		
		//验证表单，将富文本编辑器的值放到文本域中 
		form.verify({
			maxLength:function(value){
				if(value.length > 500){
					return "题干内容内容过长，最多可输入500汉字!";
				}
			},
            opts:function (value) {
				//这是一个隐藏域，保存着试题选项
				var str = "";
				$("input[name=questions_options]").each(function (index) {
                    if (undefined == $(this).val() || "" == $(this).val()) {
                        return "请添写试题选项!";
                    }
				    if(index > 0) {
				        str += "{*}";
					}
					str += $(this).val()
                });
				$("input[name=options]").val(str);
            },
            succAnsw:function(value){
                //这是一个隐藏域，保存着试题正确答案
                var str = "";
                $("input[name=success]:checked").each(function (index) {
                    str += $(this).val();
                });
                if (undefined == str || "" == str) {
                    return "请选择正确答案!";
                }
                $("input[name=success_answer]").val(str);
			}
		});

//        form.on('checkbox(success)', function(data){
//            console.log(data.elem); //得到checkbox原始DOM对象
//            console.log(data.elem.checked); //是否被选中，true或者false
//        });

//        form.on('radio(success)', function(data){
//            console.log(data.elem); //得到radio原始DOM对象
//            console.log(data.elem.checked); //是否被选中，true或者false
//        });

        //表单提交事件
		form.on('submit(questions)', function(data){
            $.logs.info(data.field);
            $.http.submitForm({
				url:"/questions/savequestions",
				data:data.field,
				success:function(r){
					if(r && r.success){
						$.prompt.alert(r.msg, "/questions/questionsList");
					}
				}
			});
			
			return false; //阻止表单跳转。因为使用ajax所以这里阻止表单的自动跳转
		});
		
	}();
	
	/*]]>*/
	</script>
</body>

</html>